<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>fmank 运营系统后台</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">fmank 运营系统后台</div>

        <ul class="layui-nav layui-layout-right">
            <li class=" layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    连馨
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">

            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">整体概览</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:showContent('traffic_analy');">流量分析</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">实时统计</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">整体趋势</a></dd>
                        <dd><a href="javascript:;">对比分析</a></dd>
                        <dd><a href="javascript:;">当前在线</a></dd>
                        <dd><a href="javascript:;">访问明细</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">用户分析</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:showContent(1);">新增用户</a></dd>
                        <dd><a href="javascript:showContent('act_user');">活跃用户</a></dd>
                        <dd><a href="javascript:;">用户留存</a></dd>
                        <dd><a href="javascript:;">用户新鲜度</a></dd>
                        <dd><a href="javascript:;">用户活跃成分</a></dd>
                        <dd><a href="javascript:;">用户访问间隔</a></dd>
                        <dd><a href="javascript:;">活跃留存</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">终端分析</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">设备数据</a></dd>
                        <dd><a href="javascript:;">地域分布</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">APP分析</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">APP版本用户分布</a></dd>
                        <dd><a href="javascript:;">APP版本升级分析</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">路径分析</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">访问路径分析</a></dd>
                        <dd><a href="javascript:;">转化漏斗</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">路径分析</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">访问路径分析</a></dd>
                        <dd><a href="javascript:;">转化漏斗</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item">
                    <a href="javascript:;">广告分析</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">站内广告分析</a></dd>
                        <dd><a href="javascript:;">站外广告分析</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div name="content" id="traffic_analy" style="padding: 15px; display:none">
            <table id="traffic_analy_tb" lay-filter="test"></table>
        </div>
        <div name="content" id="act_user" style="padding: 15px; display:none;">
            <div id="act_user_tb" style="width: 600px;height:400px;border: 1px solid dodgerblue"></div>
        </div>
        <div name="content" id="3" style="padding: 15px; display:none">内容主体区域3

        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>
</div>
<script src="layui/layui.js"></script>
<script>
    layui.use('element', function () {
        var element = layui.element;

    });

    function showContent(num) {
        $("[name=content]").hide();
        $("#" + num).show();
    }

    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#traffic_analy_tb'
            , height: 312
            , url: '/presto/trafanalytb' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'dt', title: '日期', width: 150, sort: true, fixed: 'left'}
                , {field: 'pv_cnts', title: 'pv总数', width: 100, sort: true}
                , {field: 'uv_cnts', title: 'uv总数', width: 100, sort: true}
                , {field: 'se_cnts', title: '会话总数', width: 100, sort: true}
                , {field: 'av_se_time', title: '次均时长', width: 110, sort: true}
                , {field: 'av_u_se', title: '人均次数', width: 110, sort: true}
                , {field: 'av_u_pv', title: '人均pv', width: 100, sort: true}
                , {field: 'av_u_time', title: '人均时长', width: 100, sort: true}
                , {field: 'reb_u_ratio', title: '回头客占比', width: 130, sort: true}
            ]]
        });

    });


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('act_user_tb'));

    data = [
        ["2000-06-05", 116],
        ["2000-06-06", 129],
        ["2000-06-07", 135],
        ["2000-06-08", 86],
        ["2000-06-09", 73],
        ["2000-06-10", 85],
        ["2000-06-11", 73],
        ["2000-06-12", 68],
        ["2000-06-13", 92],
        ["2000-06-14", 130],
        ["2000-06-15", 245],
        ["2000-06-16", 139],
        ["2000-06-17", 115],
        ["2000-06-18", 111],
        ["2000-06-19", 309],
        ["2000-06-20", 206],
        ["2000-06-21", 137],
        ["2000-06-22", 428],
        ["2000-06-23", 85],
        ["2000-06-24", 94],
        ["2000-06-25", 71],
        ["2000-06-26", 106],
        ["2000-06-27", 84],
        ["2000-06-28", 93],
        ["2000-06-29", 85],
        ["2000-06-30", 73],
        ["2000-07-01", 83],
        ["2000-07-02", 125],
        ["2000-07-03", 107],
        ["2000-07-04", 82],
        ["2000-07-05", 44],
        ["2000-07-06", 32],
        ["2000-07-07", 506],
        ["2000-07-08", 607],
        ["2000-07-09", 66],
        ["2000-07-10", 91],
        ["2000-07-11", 92],
        ["2000-07-12", 113],
        ["2000-07-13", 107],
        ["2000-07-14", 131],
        ["2000-07-15", 111],
        ["2000-07-16", 64],
        ["2000-07-17", 69],
        ["2000-07-18", 88],
        ["2000-07-19", 77],
        ["2000-07-20", 83],
        ["2000-07-21", 111],
        ["2000-07-22", 57],
        ["2000-07-23", 55],
        ["2000-07-24", 60]
    ];

    var dateList = data.map(function (item) {
        return item[0];
    });
    var valueList = data.map(function (item) {
        return item[1];
    });

    option = {

        // Make gradient line here
        visualMap: [{
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
        }],


        title: [{
            left: 'left',
            text: '30日 | 活跃用户趋势'
        }],
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [{
            data: dateList
        }],
        yAxis: [{
            splitLine: {
                show: true
            }
        }],
        grid: [{
            bottom: '60%'
        }],
        series: [{
            type: 'line',
            showSymbol: false,
            data: valueList
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>
